<template>
	<div>
	<div class="question-item" v-for="(question , index) in data" style="font-size:14px">
		<component 
			v-bind:is="getCurrentComponent(question)"
			:question="question" 
			:pattern="pattern"
			:index="index"
			:showRightAnswer="isShowRightAnswer"
			:showAnswerResult="isShowAnswerResult"
			:showUserAnswer="isShowUserAnswer"
			:showChecked="showChecked"
			:showScore="showScore"
			:showExplanation="isShowExplanation"
			:disabledAnswer = "isDisabledAnswer"
			:isGrader="isGrader"
			:paperid="paperid"
			:userId="userId"
			:examid="examid"
			:joined="joined"
			:showGrade="showGrade"
			:showWriteUp="showWriteUp"
			:isDetail="isDetail"
			@handleSelect="handleSelect"
			@modSubject="modSubject"
			@delSubject="delSubject"
			@on-marking="marking"
			@handleAnswerSelect="handleAnswerSelect"
			>
			<template slot="action" slot-scope="{ question,index }">
				<slot name="action" v-bind:question="question" v-bind:index="index">
						
				</slot>
			</template>
		</component>
		<Divider v-if="showDivider" dashed />
	</div>
	</div>
</template>
<script>
	import SingleQuestion from './components/question-single'
	import MutipleQuestion from './components/question-multiple'
	import CtfQuestion from './components/question-ctf'
	export default {
		name: 'QuestionList',
		components: {SingleQuestion,MutipleQuestion,CtfQuestion},
		props: {
			showWriteUp: {
				type: Boolean,
				default: false
			},
			paperid: {
				type: String,
				default: ''
			},
			joined: {
				type: Number,
				default: 0
			},
			userId: {
				type: String,
				default: ''
			},
			examid: {
				type: String,
				default: ''
			},
			showGrade: {
				type: Boolean,
				default: false
			},
			isGrader: {
				type: Boolean,
				default: false
			},
			isDetail: {
				type: Boolean,
				default: false
			},
			data: {
				type: Array,
				default() {
					return [];
				},
				validator(value) {
					//1-单选、2-多选、3-判断、4-填空、5-简答、6-ctf (以题目类型为准)
//					console.log(value);
					return value.every(item => {
						let hasModeCode = ['1','2','3','4','5','6'].includes(item.modeCode.toString());
						let hasName = item.name || item.description ? true : false;
						return hasModeCode && hasName
					})
				},
			},
			showChecked: {
				type: Boolean,
				default: false
			},
			pattern:{
				type: String,
				default: 'show',
				validator(value) {
					return ['show','answer'].includes(value)
				},
			},
			answerStatus:{
				type: String,
				default: 'finish',
				validator(value) {
					return ['finish','progress'].includes(value)
				},
			},
			showRightAnswer: {
				type: Boolean,
				default:  function () {
			        return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
			    }
			},
			showExplanation: {
				type: Boolean,
				default: function () {
			        return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
			    }
			},
			showAnswerResult: {
				type: Boolean,
				default: function () {
			        return this.pattern === 'show' || (this.pattern === 'answer' && this.answerStatus === 'progress') ? false : true
			    }
			},
			showUserAnswer:{
				type: Boolean,
				default: function () {
			        return this.pattern === 'show' || (this.pattern === 'answer' && this.answerStatus === 'progress') ? false : true
			    }
			},
			disabledAnswer:{
				type: Boolean,
				default: function () {
			        return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
			    }
			},
			showScore: {
				type: Boolean,
				default: true
			},
			showDivider: {
				type: Boolean,
				default: true
			}
		},
		mixins: [],
		data() {
			return {
				
			}
		},
		computed: {
			isShowRightAnswer(){
				if(this.hasSetShowRightAnswer){ //如果设置了值，使用设置的值
					return this.showRightAnswer
				}else{ //否则默认  答题模式+进行中 不显示正确答案，其他都显示
					return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
				}
			},
			isShowExplanation(){
				if(this.hasSetShowExplanation){//如果设置了值，使用设置的值
					return this.showExplanation
				}else{//否则默认  答题模式+进行中 不显示解析，其他都显示
					return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
				}
			},
			isShowAnswerResult(){
				if(this.hasSetShowAnswerResult){//如果设置了值，使用设置的值
					return this.showAnswerResult
				}else{//否则默认  显示模式/答题模式+进行中 不显示答题结果，其他都显示
					return this.pattern === 'show' || (this.pattern === 'answer' && this.answerStatus === 'progress') ? false : true
				}
			},
			isShowUserAnswer(){
				if(this.hasSetShowUserAnswer){//如果设置了值，使用设置的值
					return this.showUserAnswer
				}else{//否则默认  显示模式/答题模式+进行中 不显示用户答案，其他都显示
					return this.pattern === 'show' || (this.pattern === 'answer' && this.answerStatus === 'progress') ? false : true
				}
			},
			isDisabledAnswer(){
				if(this.hasSetDisabledAnswer){//如果设置了值，使用设置的值
					return this.disabledAnswer
				}else{//否则默认  答题模式+进行中 不禁用答题选择，其他都禁用
					return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
				}
			},
			hasSetShowRightAnswer(){
				return Object.keys(this.$options.propsData).includes('showRightAnswer');
			},
			hasSetShowAnswerResult(){
				return Object.keys(this.$options.propsData).includes('showAnswerResult');
			},
			hasSetShowExplanation(){
				return Object.keys(this.$options.propsData).includes('showExplanation');
			},
			hasSetShowUserAnswer(){
				return Object.keys(this.$options.propsData).includes('showUserAnswer');
			},
			hasSetDisabledAnswer(){
				return Object.keys(this.$options.propsData).includes('disabledAnswer');
			},
		},
		filters: {
			difficultyFilter: (val) => {
				let difficultyStr = '';
				if(val) {
					val = val.toLowerCase();
				}
				switch(val) {
					case 'simple':
						difficultyStr = '简单';
						break;
					case 'commonly':
						difficultyStr = '一般';
						break;
					case 'medium':
						difficultyStr = '中等';
						break;
					case 'hard':
						difficultyStr = '较难';
						break;
				}
				return difficultyStr;
			},
			modeFilter: (val) => {
				let str = '';
				if(val) {
					val = parseInt(val);
				}
				switch(val) {
					case 1:
						str = '单选';
						break;
					case 2:
						str = '多选';
						break;
					case 3:
						str = '判断';
						break;
					case 4:
						str = '填空';
						break;
					case 5:
						str = '简答';
						break;
				}
				return str;
			},
			filterIsPublic(type) {
				//1--单位  2--未单位
				let status = '';
				if(type === 1 || type === '1') {
					status = '单位'
				} else if(type === 2 || type === '2') {
					status = '未单位'
				}
				return status;
			}
		},
		watch: {

		},
		created(){
			
		},
		mounted() {

		},
		methods: {
			getCurrentComponent(question){
				switch(question.modeCode.toString()){
					case '1':
				        return 'SingleQuestion'
				        break;
				    case '2':
				        return 'MutipleQuestion'
				        break;
				    case '3':
				        return 'TrueOrFalseQuestion'
				        break;
				    case '6':
				        return 'CtfQuestion'
				        break;
				  	case '4':
				        return 'FillInTheBlanksQuestion'
				        break;
				    default:
				        return 'SingleQuestion'
				}
			},
			//checked,选择题目调用
			handleSelect($event,question){
				this.$emit('on-select',$event,question);
			},
			modSubject($event,question){
				this.$emit('mod-subject',$event,question);
			},
			delSubject($event,question){
				this.$emit('del-subject',$event,question);
			},
			//选择答案调用
			handleAnswerSelect(question,item,curAnswer){
				this.$emit('on-answer',question,item,curAnswer);
			},
			marking() {
				this.$emit('on-marking')
			}
		}
	}
</script>
<style scoped>
	.question-item{
		position: relative;
		line-height: 2;
	}
</style>